<template>
  <div class="AddOrUpdate_main add_container showDetail column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :inline="true">
        <el-form-item label="工艺要求编码">
          <div v-if="formData.code&&formData.code!=0" class="show">{{ formData.code }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料编码">
          <div v-if="formData.materialCode&&formData.materialCode!=0" class="show">{{ formData.materialCode }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料名称">
          <div v-if="formData.materialName&&formData.materialName!=0" class="show">{{ formData.materialName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="规格型号">
          <div v-if="formData.materialModel&&formData.materialModel!=0" class="show">{{ formData.materialModel }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料分类">
          <div v-if="formData.materialTypeName&&formData.materialTypeName!=0" class="show">{{ formData.materialTypeName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="物料单位">
          <div v-if="formData.materialUnitName&&formData.materialUnitName!=0" class="show">{{ formData.materialUnitName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="工艺流程号">
          <div v-if="formData.flowCode&&formData.flowCode!=0" class="show">{{ formData.flowCode }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="formData.fileName"
            :file-real-names="formData.fileRealName"
            :file-urls="formData.url"
            :row-index="1"
            :readonly="true"
            @fileName="setFileName"
          />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <div v-if="formData.remark&&formData.remark!=0" class="shows">{{ formData.remark }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>

        <el-form-item label="状态">
          <div v-if="formData.status&&formData.status!=0" class="show">{{ formData.statusName }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>

      </el-form>

      <div v-if="processFlowList.length>0" class="processRequirement_bottom">
        <div class="processRequirement_bottom_tree">
          <div class="tree_header">工艺流程</div>
          <div class="tree_container">
            <a
              v-for="(item,index) in processFlowList"
              :key="index"
              class="tree_container_item"
              :class="currentProcess.processFlowDetailId==item.processFlowDetailId?'selected_row':''"
              @click="processClick(item,index)"
            >
              {{ item.wayName }}
            </a>
          </div>
        </div>
        <div class="processRequirement_bottom_detail">
          <div class="formItem_header">
            {{ currentProcess.wayName }}工艺要求
          </div>

          <div class="formItem_header formItem_header_padding">
            计时
          </div>
          <div class="detail_form">
            <div class="detail_form_item">
              <div class="detail_form_item_name">标准工时（时）</div>
              <div class="detail_form_item_input">
                <div v-if="detailForm.standardWorkTime&&detailForm.standardWorkTime!=0" class="show">{{ detailForm.standardWorkTime }}</div>
                <div v-else class="show noData">暂无</div>
              </div>
            </div>
            <div class="detail_form_item">
              <div class="detail_form_item_name">工时单价（元）</div>
              <div class="detail_form_item_input">
                <div v-if="detailForm.workTimePrice&&detailForm.workTimePrice!=0" class="show">{{ detailForm.workTimePrice }}</div>
                <div v-else class="show noData">暂无</div>
              </div>
            </div>
          </div>
          <div class="formItem_header formItem_header_padding">
            计件
          </div>
          <div class="detail_form">
            <div class="detail_form_item">
              <div class="detail_form_item_name">计件单价（元）</div>
              <div class="detail_form_item_input">
                <div v-if="detailForm.unitPriceOfPiecework&&detailForm.unitPriceOfPiecework!=0" class="show">{{ detailForm.unitPriceOfPiecework }}</div>
                <div v-else class="show noData">暂无</div>
              </div>
            </div>
          </div>
          <div class="formItem_header formItem_header_padding">
            生产输入
          </div>
          <div ref="table_container" class="table_container">
            <el-table
              ref="table"
              :data="tableData1"
              stripe
              border
            >
              <el-table-column label="物料编码" prop="materialCode" :show-overflow-tooltip="true" />
              <el-table-column label="物料名称" prop="materialName" :show-overflow-tooltip="true" />
              <el-table-column label="规格型号" prop="materialModel" :show-overflow-tooltip="true" />
              <el-table-column label="物料分类" prop="materialTypeName" :show-overflow-tooltip="true" />
              <el-table-column label="物料单位" prop="materialUnitName" :show-overflow-tooltip="true" />
              <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
              <el-table-column label="需求数量" prop="demandNumber" :show-overflow-tooltip="true" />
            </el-table>
          </div>

          <div class="formItem_header formItem_header_padding">
            生产输出
          </div>

          <div ref="table_container" class="table_container">
            <el-table
              ref="table2"
              :data="tableData2"
              stripe
              border
            >
              <el-table-column label="物料编码" prop="materialCode" :show-overflow-tooltip="true" />
              <el-table-column label="物料名称" prop="materialName" :show-overflow-tooltip="true" />
              <el-table-column label="规格型号" prop="materialModel" :show-overflow-tooltip="true" />
              <el-table-column label="物料分类" prop="materialTypeName" :show-overflow-tooltip="true" />
              <el-table-column label="物料单位" prop="materialUnitName" :show-overflow-tooltip="true" />
              <el-table-column label="产出数量" prop="outputNumber" :show-overflow-tooltip="true" />
            </el-table>
          </div>

          <div class="formItem_header formItem_header_padding">
            生产过程
          </div>

          <div ref="table_container" class="table_container">
            <el-table
              ref="table3"
              :data="tableData3"
              stripe
              border
            >
              <el-table-column label="操作描述" prop="operationDescription" />
              <el-table-column label="产品特性" prop="productCharacter" />
              <el-table-column label="过程特性" prop="courseCharacter" />
              <!--              <el-table-column label="图号" prop="pictureCode" />-->

              <el-table-column label="图号" min-width="100" prop="pictureCode">
                <template slot-scope="scope">
                  <div class="showPicture">
                    <!-- <div class="pictureCode_div">{{ scope.row.pictureCode }}</div> -->
                    <div class="file_div">
                      <FileManage
                        :file-names.sync="scope.row.pictureId"
                        :file-real-names.sync="scope.row.pictureRealName"
                        :file-urls.sync="scope.row.pictureUrl"
                        :row-index="1"
                        :readonly="true"
                      />
                    </div>

                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getInfo } from '@/api/engineeringManage/processRequirement'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    id: {},
    showKey: {},
    showData: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        code: undefined,
        flowCode: '',
        materialId: undefined,
        materialCode: undefined,
        materialName: undefined,
        materialModel: undefined,
        materialTypeName: undefined,
        materialUnitName: undefined,
        remark: undefined,
        fileName: '',
        fileRealName: '',
        url: '',
        status: '1',
        statusName: ''
      },

      processFlowList: [], // 左边工艺流程列表数据

      detailForm: {}, // 计时，计件数据
      detailFormTemplate: { // 计时，计件数据的模板（初始化的时候用）
        flowDetailId: '',
        standardWorkTime: '',
        workTimePrice: '',
        unitPriceOfPiecework: ''
      },
      tableData1: [], // 生产输入数据
      tableData2: [], // 生产输出数据
      tableData3: [], // 生产输出数据

      selectionsAll1: [], // 生产输入选中值
      selectionsAll2: [], // 生产输出选中值
      selectionsAll3: [], // 生产输出选中值

      currentProcess: {}, // 左边当前选中工序
      currentProcessIndex: '', // 左边当前选中工序序号
      currentChooseType: '', // 当前选择物料的类型（生产输入/生产输出），目的是共用同一个物料选择弹框

      pictureOptions: [], // 图号下拉数据

      triggerTag: false // 触发标志，watch是否触发
    }
  },
  mounted() {
    getInfo(this.id).then(res => {
      Object.keys(this.formData).forEach(key => { // 给右边数据赋值
        this.formData[key] = res.data[key]
      })
      console.log(res.data)
      console.log(this.formData)
      if (res.data.flowCodeData) {
        const cacheTableData = this.$deepClone(res.data.flowCodeData)
        const cacheTableData2 = []
        cacheTableData.forEach(item => {
          const cacheItem = this.$deepClone(item)
          cacheItem.engineeringRequireDetailDemandData = item.engineeringRequireDetailListVo ? item.engineeringRequireDetailListVo.engineeringRequireDetailDemandData : []
          cacheItem.engineeringRequireDetailOutputData = item.engineeringRequireDetailListVo ? item.engineeringRequireDetailListVo.engineeringRequireDetailOutputData : []
          cacheItem.engineeringRequireDetailProcessData = item.engineeringRequireDetailListVo ? item.engineeringRequireDetailListVo.engineeringRequireDetailProcessData : []
          cacheItem.engineeringRequireDetail = item.engineeringRequireDetailListVo
          cacheItem.delete['engineeringRequireDetailListVo']
          cacheTableData2.push(cacheItem)
        })

        this.processFlowList = cacheTableData2
      }
      this.processFlowList.forEach(item => {
        item.processFlowDetailId = item.id
        item.flowDetailId = item.id
      })
      this.$nextTick(() => {
        // 模拟点击第一条
        this.currentProcess = this.processFlowList[0]
        this.currentProcessIndex = 0
        this.detailForm = this.currentProcess.engineeringRequireDetail || this.$deepClone(this.detailFormTemplate)
        this.detailForm.flowDetailId = this.processFlowList[0].flowDetailId
        this.tableData1 = this.currentProcess.engineeringRequireDetailDemandData || []
        this.tableData2 = this.currentProcess.engineeringRequireDetailOutputData || []
        this.tableData3 = this.currentProcess.engineeringRequireDetailProcessData || []
      })
    })
  },
  methods: {
    setFileName(...data) {
      this.tableData[data[3]].fileName = data[0]
      this.tableData[data[3]].fileRealName = data[1]
      this.tableData[data[3]].fileUrl = data[2]
    },
    checkCurrentForm() { // 校验当前工序的表单
      let res = true
      if (res && (this.detailForm.standardWorkTime)) {
        if (!this.SETTINGS.reg_integer.test(this.detailForm.standardWorkTime)) {
          this.$message({
            message: '工时必须为整数',
            type: 'warning'
          })
          res = false
        }
      }
      if (res && (this.detailForm.workTimePrice)) {
        const reg = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
        if (!reg.test(this.detailForm.workTimePrice)) {
          this.$message({
            message: '单价最多两位小数',
            type: 'warning'
          })
          res = false
        }
      }
      if (res && (this.detailForm.unitPriceOfPiecework)) {
        const reg = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
        if (!reg.test(this.detailForm.unitPriceOfPiecework)) {
          this.$message({
            message: '单价最多两位小数',
            type: 'warning'
          })
          res = false
        }
      }
      if (res && (this.tableData1.length > 0)) {
        const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
        this.tableData1.forEach(item => {
          if (res && !item.demandNumber) {
            this.$message({
              message: '需求数量不能为空',
              type: 'warning'
            })
            res = false
          }
          if (res && !reg.test(item.demandNumber)) {
            this.$message({
              message: '需求数量最多两位小数',
              type: 'warning'
            })
            res = false
          }
        })
      }
      if (res && (this.tableData2.length > 0)) {
        const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
        this.tableData2.forEach(item => {
          if (res && !item.outputNumber) {
            this.$message({
              message: '需求数量不能为空',
              type: 'warning'
            })
            res = false
          }
          if (res && !reg.test(item.outputNumber)) {
            this.$message({
              message: '需求数量最多两位小数',
              type: 'warning'
            })
            res = false
          }
        })
      }

      if (res) {
        return true
      } else {
        return false
      }
    },
    processClick(data, index) {
      if (this.checkCurrentForm()) {
        // 如果校验通过，先把旧数据更新到左边工序列表中
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetail = this.$deepClone(this.detailForm)
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetailDemandData = this.$deepClone(this.tableData1)
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetailOutputData = this.$deepClone(this.tableData2)
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetailProcessData = this.$deepClone(this.tableData3)

        this.currentProcess = data
        this.currentProcessIndex = index
        this.detailForm = data.engineeringRequireDetail || this.$deepClone(this.detailFormTemplate)
        this.detailForm.flowDetailId = data.flowDetailId
        this.tableData1 = data.engineeringRequireDetailDemandData || []
        this.tableData2 = data.engineeringRequireDetailOutputData || []
        this.tableData3 = data.engineeringRequireDetailProcessData || []
      } else {

      }
    }
  }
}
</script>

<style lang="less" scoped>
.shows {
  padding-top: 10px !important;
  padding-bottom: 10px ;
}
.FileManageFull_container{
  padding-top:10px ;
}
.processRequirement_bottom{
  display: flex;
  border-top: 1px solid rgba(105,105,105,0.2);
  margin-top: 20px;
  .processRequirement_bottom_tree{
    width: 30%;
    border-right: 1px solid rgba(105,105,105,0.2);
    .tree_header{
      height: 50px;
      margin: 0 20px;
      display: flex;align-items: center;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #387BFC;
    }
    .tree_container{
      margin: 0 20px;overflow-y: overlay;

      .tree_container_item{
        height: 40px;display: flex;align-items: center;
        padding-left: 20px;
      }
      .selected_row{

        background-color: rgba(56,123,252,1);
        color: white;
      }

      .tree_container_item:hover{
        background-color: rgba(56,123,252,0.5);
        color: white;
      }
    }
  }
  .processRequirement_bottom_detail{
    width: 70%;
    .formItem_header_padding{
      margin-top: 20px;
    }
    .detail_form{
      display: flex;align-items: center;
      .detail_form_item{
        width: calc(50% - 40px);
        display: flex;align-items: center;
        margin-left: 20px;
        margin-right: 20px;
        .detail_form_item_name{
          height: 30px;
          line-height: 30px;
          width: 120px;
          font-size: 14px;
          color: #666;
        }
        .detail_form_item_input{
          width: calc(100% - 120px);
          /deep/ .el-input__inner{
            height: 30px;
            line-height: 30px;
          }
          .show{
            font-size: 14px;
          }
        }
      }
    }
  }
}
.noData{
  color: #c0c4cc;
}
.showPicture{
  display: flex;
  .pictureCode_div{
  }
  .file_div{
    margin-left: 10px;
    color: blue;
  }
}
/deep/ .el-form-item{
  .el-form-item__label{
    color: #1F51B3;
    font-size: 15px;
  }
  .el-form-item__content{
    color: #333333;
    font-size: 15px;
  }
}
.el-table {
  font-size: 15px;
}
</style>
